<template>
  <div class="warehouse-header">
    <el-card class="box-cardff2">
      <div class="title-section">
        <div class="main-title">
          <h2>{{ formData.inboundTheme }}</h2>
          <div class="operation-buttons">
            <el-button type="success" size="small" @click="handleDelete">删除</el-button>
            <el-button type="primary" size="small" @click="handleExport">导出</el-button>
            <el-button type="primary" size="small" @click="handlePrint">打印</el-button>
          </div>
        </div>
        <div class="info-section">
          <div class="info-item">
            <span>创建人：</span>
            <span>{{ formData.createdBy }}</span>
          </div>
          <div class="info-item">
            <span>创建时间：</span>
            <span>{{ formData.creationTime }}</span>
          </div>
        </div>
      </div>

      <div class="tab-section">
        <el-tabs v-model="activeTab" type="card">
          <el-tab-pane label="入库信息" name="basicInfo">
            <div class="basic-info-display">
              <el-card class="box-cardff">
                <div slot="header">
                  <span>基本信息</span>
                </div>

                <el-row :gutter="20" class="info-row2">
                  <el-col :span="12">
                    <div class="info-item2">
                      <span class="label">入库单号：</span>
                      <span class="content">{{ formData.code }}</span>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="info-item2">
                      <span class="label">入库主题：</span>
                      <span class="content">{{ formData.inboundTheme }}</span>
                    </div>
                  </el-col>
                </el-row>

                <el-row :gutter="20" class="info-row2">
                  <el-col :span="12">
                    <div class="info-item2">
                      <span class="label">入库类型：</span>
                      <span class="content">{{ formData.inboundType }}</span>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="info-item2">
                      <span class="label">入库日期：</span>
                      <span class="content">{{ formData.inboundDate }}</span>
                    </div>
                  </el-col>
                </el-row>

                <el-row :gutter="20" class="info-row2">
                  <el-col :span="12">
                    <div class="info-item2">
                      <span class="label">入库申请人：</span>
                      <span class="content">{{ formData.inboundApplicants }}</span>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="info-item2">
                      <span class="label">所在部门：</span>
                      <span class="content">{{ formData.department }}</span>
                    </div>
                  </el-col>
                </el-row>

                <el-row :gutter="20" class="info-row2">
                  <el-col :span="12">
                    <div class="info-item2">
                      <span class="label">仓库名称：</span>
                      <span class="content">{{ formData.warehouse }}</span>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="info-item2">
                      <span class="label">仓库管理员：</span>
                      <span class="content">{{ formData.warehouseAdministrator }}</span>
                    </div>
                  </el-col>
                </el-row>

                <el-row :gutter="20" class="info-row2">
                  <el-col :span="12">
                    <div class="info-item2">
                      <span class="label">入库人员：</span>
                      <span class="content">{{ formData.inboundPersonnel }}</span>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="info-item2">
                      <span class="label">所在部门：</span>
                      <span class="content">{{ formData.department2 }}</span>
                    </div>
                  </el-col>
                </el-row>

                <el-row :gutter="20" class="info-row2">
                  <el-col :span="24">
                    <div class="info-item2">
                      <span class="label">备注：</span>
                      <span class="content">{{ formData.remark || '-' }}</span>
                    </div>
                  </el-col>
                </el-row>
              </el-card>

              <el-card class="box-card5yy">
                <div slot="header">
                  <span>附件</span>
                </div>

                <div class="operation-buttons">
                  <el-button type="primary" size="small">批量下载</el-button>
                </div>

                <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column prop="index" label="序号" width="80">
                    <template slot-scope="scope">
                      {{ scope.$index + 1 }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="filename" label="文件名" min-width="200">
                  </el-table-column>
                  <el-table-column prop="uploadTime" label="上传时间" width="180">
                  </el-table-column>
                  <el-table-column prop="uploader" label="上传者" width="120">
                  </el-table-column>
                  <el-table-column prop="size" label="文档大小" width="100">
                  </el-table-column>
                  <el-table-column label="操作" width="100" fixed="right">
                    <template slot-scope="scope">
                      <el-button type="text" style="color: #67C23A" @click="handleDownload(scope.row)">下载</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </el-tab-pane>
          <el-tab-pane label="入库明细" name="detail">
            <div class="warehouse-detail">
              <div class="operation-buttons">
                <el-button type="primary" size="small" @click="handleExport">导出</el-button>
              </div>
              <el-table :data="tableData2" stripe style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column prop="index" label="序号" width="60" align="center">
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column prop="encode" label="备件编码" width="180" align="center">
                </el-table-column>
                <el-table-column prop="name" label="备件名称" width="120" align="center">
                </el-table-column>
                <el-table-column prop="spec" label="规格型号" width="120" align="center">
                </el-table-column>
                <el-table-column prop="type" label="备件类型" width="120" align="center">
                </el-table-column>
                <el-table-column prop="brand" label="品牌" width="100" align="center">
                </el-table-column>
                <el-table-column prop="unit" label="单位" width="80" align="center">
                </el-table-column>
                <el-table-column prop="inboundQuantity" label="入库数量" width="100" align="center">
                </el-table-column>
                <el-table-column prop="storageLocation" label="存放位置" min-width="120" align="center">
                </el-table-column>
                <el-table-column prop="remark" label="备注" min-width="120" align="center">
                </el-table-column>
              </el-table>

              <div class="total-amount">
                入库总数量：<span class="amount">{{ totalAmount }}</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="操作记录" name="record">
            <div class="operation-log">
              <div class="operation-buttons">
                <el-button type="primary" size="small" @click="handleExport">导出</el-button>
              </div>

              <el-table :data="tableData3" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="index" label="序号" width="80">
                </el-table-column>
                <el-table-column prop="operator" label="操作人" width="120">
                </el-table-column>
                <el-table-column prop="operateTime" label="操作时间" width="180">
                </el-table-column>
                <el-table-column prop="content" label="操作内容" min-width="200">
                </el-table-column>
              </el-table>

              <div class="pagination-container">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                  :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>


  </div>
</template>

<script>
import { SelectNormalWarehousingcha } from '@/api/eastjet-maintenance/tai/tai'
import { get } from 'sortablejs';
export default {
  name: 'WarehouseHeader',
  data() {
    return {
      formcode: {
        code: this.$route.query.code,
      },
      tableData3: Array.from({ length: 5 }, (_, index) => ({
        index: index + 1,
        operator: 'admin',
        operateTime: '2026-06-07 20:00:00',
        content: ''
      })),
      selectedRows: [],
      currentPage: 1,
      pageSize: 10,
      total: 45,
      tableData2: [],
      selectedRows2: [],
      tableData: [],
      selectedFiles: [],
      activeTab: 'basicInfo',
      formData: {

      }
    }
  },
  computed: {
    totalAmount() {
      return this.tableData2.reduce((sum, row) => sum + (row.amount || 0), 0)
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    getlist() {
      SelectNormalWarehousingcha(this.formcode).then(res => {
        this.formData = res.data.data.normalWarehousings[0]
        this.tableData2 = res.data.data.inboundDetails
        this.tableData = res.data.data.documentations
      })
    },
    handleExport() {
      this.$message.success('开始导出数据')
      // 实际导出逻辑需要根据后端API实现
    },
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      // 这里实现获取数据的逻辑
      console.log('获取第' + this.currentPage + '页，每页' + this.pageSize + '条')
    },
    handleExport() {
      this.$message.success('开始导出数据')
      // 实际导出逻辑需要根据后端API实现
    },
    handleSelectionChange(val) {
      this.selectedRows2 = val
    },
    // 下载文件
    handleDownload(row) {
      this.$message.success(`开始下载文件：${row.fileName}`)
      // 实际下载逻辑需要根据后端API实现
    },

    // 选择文件变化
    handleSelectionChange(val) {
      this.selectedFiles = val
    },
    handleDelete() {
      this.$confirm('确认删除该入库单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => { })
    },
    handleExport() {
      this.$message.success('开始导出数据')
    },
    handlePrint() {
      this.$message.success('开始打印数据')
    }
  }
}
</script>

<style scoped>
.operation-log {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
}

.total-amount {
  margin-top: 20px;
  text-align: right;
  font-size: 14px;
  padding-right: 20px;
}

.attachment-list {
  padding: 20px;
}

.box-card5yy {
  margin-top: 20px;
  width: 1213px;
  margin-left: -6px;
}

.operation-buttons {
  margin-bottom: 20px;
}

.upload-button {
  display: inline-block;
}

.el-table {
  margin-top: 15px;
}

.el-table .cell {
  padding-left: 10px;
  padding-right: 10px;
}

.el-button--text {
  padding: 0;
}

.basic-info-display {
  padding: 20px;
}

.box-cardff {
  width: 1213px;
  margin-left: -6px;
}

.box-cardff2 {
  width: 1210px;
  margin-left: 14px;
}

.info-row2 {
  margin-bottom: 20px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-item2 {
  display: flex;
  margin-left: 120px;
  line-height: 20px;
}

.label {
  color: #606266;
  width: 100px;
  text-align: right;
  padding-right: 12px;
  font-size: 14px;
}

.content {
  color: #333;
  flex: 1;
  font-size: 14px;
}

.el-card__header {
  padding: 15px 20px;
  border-bottom: 1px solid #EBEEF5;
  box-sizing: border-box;
}

.el-card__body {
  padding: 20px;
}

.warehouse-header {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.title-section {
  margin-bottom: 40px;
}

.main-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.main-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.operation-buttons {
  display: flex;
  gap: 10px;
}

.info-section {
  display: flex;
  gap: 30px;
  height: 50px;
  color: #666;
  font-size: 14px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-item span:first-child {
  color: #999;
}

.tab-section {
  margin-top: 20px;
}

.el-tabs--card>.el-tabs__header {
  border-bottom: 1px solid #E4E7ED;
}

.el-tabs--card>.el-tabs__header .el-tabs__nav {
  border: none;
}

.el-tabs--card>.el-tabs__header .el-tabs__item {
  border: none;
  height: 40px;
  line-height: 40px;
}

.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
  background-color: #fff;
  border-bottom: 2px solid #409EFF;
  color: #409EFF;
}
</style>
